// src\components\sendBox\TopHeader.jsx
// 头部结构
import React from 'react'
import { Layout, Button, theme, Dropdown, Avatar } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
import {connect} from 'react-redux'

//UI组件
 function TopHeader(props) {
  const {role:{roleName},username}=JSON.parse(localStorage.getItem('token'));
  const items = [
    {
      key: '1',
      label: (
        <span>{roleName}</span>
      ),
    },
    {
      key: '2',
      danger: true,
      label: '退出',
    },
  ];
  // 点击下拉框子组件
  const clickMenuItem = ({ item, key, keyPath, domEvent }) => {
    if(key==='2'){
      // 退出登陆
        props.history.push('/login');
        localStorage.removeItem('token');
    }
  }
  // 改变侧边栏的收缩和展开
  const changeCollapsed = () => {
    // console.log("TopHeader---changeCollapsed");
    props.changeCollapsed()
  }
  const { Header } = Layout;
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Header
      style={{
        padding: 0,
        background: colorBgContainer,
      }}
    >
      <Button
        type="text"
        icon={props.isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={changeCollapsed}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />
      <div style={{ float: "right" }}>
        <span>欢迎<span style={{ color: "#1890ff" }}>{username}</span>回来</span>
        <Dropdown menu={{ items, onClick: clickMenuItem }}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>

      </div>


    </Header>
  )
}
//容器组件部分
//将数据传递给UI组件
const mapStateToProps=({CollApsedReducer:{isCollapsed}})=>{
  return {
    isCollapsed
  }
}
//需要对props进行的一些操作
const mapDispatchToProps={
  changeCollapsed(){
    return {
      type:'change_collapsed'
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader));